<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="header-left">
        <text class="platform-name">智慧农业监测</text>
        <view class="farm-selector" @tap="showFarmSelector">
          <text>{{ currentFarmName }}</text>
          <text class="iconfont icon-down"></text>
        </view>
      </view>
      <view class="header-right">
        <view class="weather-info">
          <text class="iconfont" :class="weatherIcon"></text>
          <text>{{ weather.temperature }}°C</text>
        </view>
      </view>
    </view>
    
    <!-- 环境数据模块 -->
    <environment-data :city-code="currentCityCode" />
    
    <!-- 设备状态概览 -->
    <view class="device-overview">
      <view class="section-header">
        <text class="section-title">设备状态</text>
        <text class="view-all" @tap="goToDevices">查看全部</text>
      </view>
      
      <view class="device-stats">
        <view class="stat-item">
          <text class="stat-value">{{ deviceStats.total }}</text>
          <text class="stat-label">总设备</text>
        </view>
        <view class="stat-item">
          <text class="stat-value online">{{ deviceStats.online }}</text>
          <text class="stat-label">在线</text>
        </view>
        <view class="stat-item">
          <text class="stat-value offline">{{ deviceStats.offline }}</text>
          <text class="stat-label">离线</text>
        </view>
        <view class="stat-item">
          <text class="stat-value warning">{{ deviceStats.warning }}</text>
          <text class="stat-label">异常</text>
        </view>
      </view>
      
      <view class="device-list">
        <view class="device-item" v-for="(device, index) in devices.slice(0, 3)" :key="index" @tap="viewDeviceDetail(device.id)">
          <view class="device-icon">
            <text class="iconfont" :class="device.icon"></text>
          </view>
          <view class="device-info">
            <text class="device-name">{{ device.name }}</text>
            <view class="device-status" :class="device.status">
              <view class="status-dot"></view>
              <text>{{ getStatusText(device.status) }}</text>
            </view>
          </view>
          <text class="iconfont icon-right"></text>
        </view>
      </view>
    </view>
    
    <!-- 快捷功能 -->
    <view class="quick-actions">
      <view class="section-header">
        <text class="section-title">快捷功能</text>
      </view>
      
      <view class="action-grid">
        <view class="action-item" v-for="(action, index) in quickActions" :key="index" @tap="handleQuickAction(action.id)">
          <view class="action-icon" :style="{ backgroundColor: action.bgColor }">
            <image :src="action.icon" mode="aspectFit" class="icon-image"></image>
          </view>
          <text class="action-name">{{ action.name }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
/// <reference types="@dcloudio/types" />
import { ref, reactive, computed, onMounted } from 'vue';
import EnvironmentData from '@/components/EnvironmentData.vue';

// 农场数据
const farms = [
  { 
    id: 1, 
    name: '绿源农场1号',
    cityCode: '110101' // 北京市
  },
  { 
    id: 2, 
    name: '绿源农场2号',
    cityCode: '430100' // 长沙市
  },
  { 
    id: 3, 
    name: '蔬菜大棚基地',
    cityCode: '440100' // 广州市
  }
];

const currentFarm = ref(1);

// 当前农场名称
const currentFarmName = computed(() => {
  const farm = farms.find(f => f.id === currentFarm.value);
  return farm ? farm.name : '选择农场';
});

// 当前城市编码
const currentCityCode = computed(() => {
  const farm = farms.find(f => f.id === currentFarm.value);
  return farm ? farm.cityCode : '110101'; // 默认使用北京市编码
});

// 天气数据
const weather = reactive({
  condition: 'sunny',
  temperature: '26',
  humidity: '65%',
  windSpeed: '3.2m/s'
});

const weatherIcon = computed(() => {
  const iconMap = {
    'sunny': 'icon-sunny',
    'cloudy': 'icon-cloudy',
    'rainy': 'icon-rainy',
    'snowy': 'icon-snowy'
  };
  
  return iconMap[weather.condition] || 'icon-sunny';
});

// 设备统计
const deviceStats = reactive({
  total: 12,
  online: 9,
  offline: 2,
  warning: 1
});

// 设备列表
const devices = reactive([
  {
    id: 1,
    name: '温湿度传感器01',
    status: 'online',
    icon: 'icon-sensor'
  },
  {
    id: 2,
    name: '土壤传感器02',
    status: 'online',
    icon: 'icon-soil-sensor'
  },
  {
    id: 3,
    name: '光照传感器03',
    status: 'warning',
    icon: 'icon-light-sensor'
  },
  {
    id: 4,
    name: '摄像头01',
    status: 'online',
    icon: 'icon-camera'
  },
  {
    id: 5,
    name: '灌溉控制器01',
    status: 'offline',
    icon: 'icon-irrigation'
  }
]);

// 快捷功能
const quickActions = reactive([
  {
    id: 'monitor',
    name: '视频监控',
    icon: '/static/index/camera-one.png',
    bgColor: 'rgba(3, 169, 244, 0.1)'
  },
  {
    id: 'irrigation',
    name: '灌溉控制',
    icon: '/static/index/control.png',
    bgColor: 'rgba(76, 175, 80, 0.1)'
  },
  {
    id: 'ai',
    name: 'AI助手',
    icon: '/static/index/whale.png',
    bgColor: 'rgba(156, 39, 176, 0.1)'
  },
  {
    id: 'report',
    name: '数据报表',
    icon: '/static/index/baobiao.png',
    bgColor: 'rgba(255, 152, 0, 0.1)'
  },
  {
    id: 'alert',
    name: '告警设置',
    icon: '/static/index/alert.png',
    bgColor: 'rgba(244, 67, 54, 0.1)'
  }
]);

// 方法
const showFarmSelector = () => {
  uni.showActionSheet({
    itemList: farms.map(farm => farm.name),
    success: (res) => {
      currentFarm.value = farms[res.tapIndex].id;
      // 切换农场时会自动触发环境数据更新，因为currentCityCode是计算属性
    }
  });
};

const refreshData = () => {
  // 模拟数据刷新
  console.log('刷新数据，当前农场ID:', currentFarm.value);
};

const getStatusText = (status) => {
  const statusMap = {
    'online': '在线',
    'offline': '离线',
    'warning': '异常'
  };
  
  return statusMap[status] || '未知';
};

const viewDeviceDetail = (deviceId) => {
  uni.navigateTo({
    url: `/pages/devices/detail?id=${deviceId}`
  });
};

const goToDevices = () => {
  uni.switchTab({
    url: '/pages/devices/devices'
  });
};

// 修改快捷功能跳转方法
const handleQuickAction = (actionId) => {
  switch (actionId) {
    case 'monitor':
      uni.switchTab({
        url: '/pages/monitor/monitor'
      });
      break;
    case 'irrigation':
      uni.navigateTo({
        url: '/pages/irrigation/index'
      });
      break;
    case 'ai':
      uni.navigateTo({
        url: '/pages/chat/index'
      });
      break;
    case 'report':
      uni.navigateTo({
        url: '/pages/report/index'
      });
      break;
    case 'alert':
      uni.navigateTo({
        url: '/pages/alert/index'
      });
      break;
    default:
      break;
  }
};

// 生命周期钩子
onMounted(() => {
  refreshData();
});
</script>

<style>
/* 全局样式 */
page {
  background-color: #f5f7fa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: 60px;
}

/* 顶部导航栏 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #4CAF50;
}

.header-left {
  display: flex;
  flex-direction: column;
}

.platform-name {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 5px;
}

.farm-selector {
  display: flex;
  align-items: center;
}

.farm-selector text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

.farm-selector .iconfont {
  font-size: 12px;
  margin-left: 5px;
}

.header-right {
  display: flex;
  align-items: center;
}

.weather-info {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 5px 10px;
}

.weather-info .iconfont {
  font-size: 18px;
  color: #ffffff;
  margin-right: 5px;
}

.weather-info text:last-child {
  font-size: 14px;
  color: #ffffff;
}

/* 区块通用样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

.update-time {
  font-size: 12px;
  color: #999999;
}

.view-all {
  font-size: 14px;
  color: #4CAF50;
}

/* 设备状态概览 */
.device-overview {
  background-color: #ffffff;
  border-radius: 10px;
  margin: 10px 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.device-stats {
  display: flex;
  padding: 0 15px 15px;
}

.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 5px;
}

.stat-value.online {
  color: #4CAF50;
}

.stat-value.offline {
  color: #9E9E9E;
}

.stat-value.warning {
  color: #FF9800;
}

.stat-label {
  font-size: 12px;
  color: #999999;
}

.device-list {
  padding: 0 15px 15px;
}

.device-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.device-item:last-child {
  border-bottom: none;
}

.device-icon {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background-color: rgba(76, 175, 80, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.device-icon .iconfont {
  font-size: 18px;
  color: #4CAF50;
}

.device-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.device-name {
  font-size: 14px;
  color: #333333;
  margin-bottom: 5px;
}

.device-status {
  display: flex;
  align-items: center;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  margin-right: 5px;
}

.device-status.online .status-dot {
  background-color: #4CAF50;
}

.device-status.offline .status-dot {
  background-color: #9E9E9E;
}

.device-status.warning .status-dot {
  background-color: #FF9800;
}

.device-status text {
  font-size: 12px;
  color: #999999;
}

.device-item .icon-right {
  font-size: 16px;
  color: #cccccc;
}

/* 快捷功能 */
.quick-actions {
  background-color: #ffffff;
  border-radius: 10px;
  margin: 10px 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.action-grid {
  display: flex;
  justify-content: space-between;
  padding: 0 10px 15px;
}

.action-item {
  width: 19%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
}

.action-icon {
  width: 45px;
  height: 45px;
  border-radius: 22.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  
  .icon-image {
    width: 25px;
    height: 25px;
  }
}

.action-name {
  font-size: 12px;
  color: #666666;
  text-align: center;
  white-space: nowrap;
}

/* 图标样式 */
.iconfont {
  font-family: "iconfont";
}
</style>